<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>淘兴趣-登录</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/phone.css" />
	<link rel='stylesheet' type="text/css" href="/stylesheets/common.css" />
	<script type="text/javascript" src="/javascripts/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="/javascripts/bootstrap.min.js"></script>

	<style type="text/css">
		.main img {
			width: 80px;
		}

		.title {
			line-height: 50px;
		}

		.title p {
			font-size: 18px;
		}

		.tips {
			padding-left: 15px;
		}
	</style>

	<script>
		function adminYes() {
			alert(1)
		}

		function adminNo() {
			alert(0)
		}
	</script>

</head>

<body>

	<div class="main">

		<div class="d-flex align-items-center justify-content-around">
			<img class="logo" src="images/logo.png" alt="" />
			<h1 class="title text-center">淘兴趣<p>淘兴趣——关注你感兴趣的人和事</p>
			</h1>
		</div>

		<form action="register" method="post" class="form" enctype="multipart/form-data">
			<div class="form-group d-flex align-items-center">
				<label for="account" class="col-3 col-form-label">账号*:</label>
				<input type="text" name="account" class="form-control" placeholder="请输入账号" />
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p id='tips-account'></p>
			</div>

			<div class="form-group d-flex align-items-center">
				<label for="password" class="col-3 col-form-label">密码*:</label>
				<input type="password" name="password" class="form-control" placeholder="请输入密码" />
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p id='tips-pass'></p>
			</div>

			<div class="form-group d-flex align-items-center">
				<label for="re_password" class="col-3 col-form-label">确认密码*:</label>
				<input type="password" name="re_password" class="form-control" placeholder="确认密码" />
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p></p>
			</div>

			<div class="form-group d-flex align-items-center">
				<label for="sex" class="col-3 col-form-label">性别*:</label>
				<input type="radio" name="sex" id="man" value="0" checked="checked" />男
				<input type="radio" name="sex" id="wom" value="1" />女
			</div>

			<div class="form-group d-flex align-items-center">
				<label for="email" class="col-3 col-form-label">邮箱:</label>
				<input type="text" name="email" class="form-control" placeholder="请输入邮箱" />
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p id='tips-email'></p>
			</div>


			<div class="form-group d-flex align-items-center">
				<label for="img" class="col-3 col-form-label">头像:</label>
				<input type="file" name="img" accept="image/*" class="form-control" />
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p></p>
			</div>
			<div class="form-group d-flex align-items-center">
				<label for="resume" class="col-3 col-form-label">个人简介:</label>
				<textarea type="text" name="resume" class="form-control" placeholder="请输入个人简介" /></textarea>
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p id='tips-resume'></p>
			</div>

			<script>
				function adminYes1() {
					let adminKeyInput = document.getElementById('admin-key-input');
					adminKeyInput.style.display = 'block';
				}

				function adminNo1() {
					let adminKeyInput = document.getElementById('admin-key-input');
					adminKeyInput.style.display = 'none';
				}
			</script>

			<div class="form-group d-flex align-items-center">
				<label for="sex" class="col-3 col-form-label">注册管理员账户:</label>
				<input type="radio" name="adminSelect" id="adminYes" value="1" onclick="adminYes1()" />是
				<input type="radio" name="adminSelect" id="adminNo" value="0" onclick="adminNo1()" checked="checked" />否
			</div>
			<div class="tips row">
				<div class="col-3"></div>
				<p id='tips-adminKey'></p>
			</div>

			<div id="admin-key-input" style="display: none;">
				<div class="form-group d-flex align-items-center">
					<label for="email" class="col-3 col-form-label">管理员密钥:</label>
					<input type="text" name="adminKey" class="form-control" placeholder="请输入管理员密钥" />
				</div>

			</div>

			<p>*号为必填项</p>

			<div class="form-group p-2 d-flex align-items-center">
				<input id="log_btn" class="mr-auto w-50 p-1" type="submit" value="注册" />
			</div>
	</div>
	</form>
	</div>

	<script>
		let d = <%- JSON.stringify(messages) %>;
		d.forEach((item) => {
			document.getElementById(item.type).innerText = item.msg;
		})
	</script>
	<% removeMessage() %>
</body>

</html>
